<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            width: 800px;
            padding: 0;
            display: flex;
            justify-content: start;
            background-color: rgb(211, 211, 211);
        }
        li {
            list-style-type: none;
            width: 20%;
            text-align: center;
        }

        .tab_list .current {
            background-color: #c81623;
        }
        .item {
            display: none;
        }
    </style>
</head>
         
<body>
   <div class="tab">
       <div class="tab_list">
           <ul>
               <li class="current">商品</li>
               <li>规格与包装</li>
               <li>售后保障</li>
               <li>商品评价(50000)</li>
               <li>手机社区</li>
           </ul>
       </div>
       <div class="tab_con">
           <div class="item" style="display: block;">
               商品介绍模块
           </div>
           <div class="item">
            规格与包装快内容
        </div>
        <div class="item">
            售后保障快内容
        </div>
        <div class="item">
            商品评价(500000)模块内容
        </div>
        <div class="item">
            商品评价(500000)模块内容
        </div>
       </div>
   </div>
    <script>
       var tab_list = document.querySelector('.tab_list');
       var lis = document.querySelectorAll('li')
       var items = document.querySelectorAll('.item')
        for(var i = 0; i < lis.length;i++) {
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
                for(var i = 0 ; i < lis.length;i++) {
                    lis[i].className = ''
                }
                //留下我自己
                this.className = 'current'
                //下面的显示内容模块
                var index = this.getAttribute('index');
                // 干掉所有人 让其余的items 这些div 隐藏
                for(var i = 0 ; i < items.length;i++) {
                    items[i].style.display = 'none';
                }
                //留下我自己 让对应的item 显示出来
                items[index].style.display = 'block'
            }
        }
    </script>
</body>

</html>